<!-- 个人中心 -->
<template>
	<view class="container">
		<view class="topBox">
			<view class="top" style="display: flex;">
				<view>
					<u-avatar size="98" :show-sex="true" :sex-icon="vuex_user.gender == 1 ? 'woman' : 'man'"
						:src="url || vuex_user.avatar"></u-avatar>
				</view>
				<view style="display: flex;width: 100%;">
					<view style="flex: 1;">
						<view class="topitem1" v-if="vuex_token">
							<view class="name">{{ vuex_user.nickname || '' }}</view>
							<view class="content" v-html="vuex_user.bio || '这家伙很懒，什么也没写！'"></view>
						</view>
						<block v-else>
							<view class="u-m-t-20 u-m-l-30">
								<u-button hover-class="none" size="mini" @click="goPage('/pages/login/mobilelogin')">
									立即登录</u-button>
							</view>
						</block>
					</view>
					<view
						style="flex: 1;display: flex;align-items: flex-end;flex-direction: column;justify-content: end;margin-right: 30rpx;">
						<view style="text-align: center;" @click="goPage('pages/personalCenter/personaldata', true)">
							<u-icon name="/static/image/bj.png" size="30"></u-icon>
							<view style="font-size: 24rpx;color: #FFFFFF;line-height: 40rpx;">编辑</view>
						</view>
					</view>
				</view>

			</view>
			<view class="top1">
				<view @click="goPage('/pages/order/list?status=1', true)">
					<view class="num"><text v-text="(vuex_user.order && vuex_user.order.created) || 0"></text></view>
					<view class="title">待付款</view>
				</view>
				<view @click="goPage('/pages/order/list?status=2', true)">
					<view class="num"><text v-text="(vuex_user.order && vuex_user.order.paid) || 0"></text></view>
					<view class="title">待发货</view>
				</view>
				<view @click="goPage('/pages/order/list?status=4', true)">
					<view class="num"><text v-text="(vuex_user.order && vuex_user.order.evaluate) || 0"></text></view>
					<view class="title">待评论</view>
				</view>
			</view>
		</view>
		<view class="zhong">
			<view class="zhong-title">我的订单</view>
			<view class="zhongBox">
				<view @click="goPage('/pages/distribution/distributionOrder', true)">
					<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao54.png"></image>
					<view class="zhongname">分销订单</view>
				</view>
				<view @click="goPage('/pages/order/list', true)">
					<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao55.png"></image>
					<view class="zhongname">商品订单</view>
				</view>
			</view>
		</view>

		<view class="zhong" style="margin-top: 20rpx;height: 234rpx;">
			<view class="zhong-title">常用功能</view>
			<view class="zhongBox">
				<view @click="goPage('/pages/distribution/center', true)">
					<image style="width: 47rpx;height: 46rpx;" src="../../static/image/fxzx.png"></image>
					<view class="zhongname2">分销中心</view>
				</view>
				<view @click="goPage('/pages/address/address', true)">
					<image style="width: 47rpx;height: 46rpx;" src="../../static/image/wddz.png"></image>
					<view class="zhongname2">我的地址</view>
				</view>
				<view @click="goPage('pages/personalCenter/contactUs', true)">
					<image style="width: 47rpx;height: 46rpx;" src="../../static/image/lxkf.png"></image>
					<view class="zhongname2">联系我们</view>
				</view>
				<view @click="goPage('pages/personalCenter/systemAccount', true)">
					<image style="width: 47rpx;height: 46rpx;" src="../../static/image/shezhi.png"></image>
					<view class="zhongname2">设置</view>
				</view>
			</view>
		</view>

		<view class="xia">
			<!-- 	<view  @click="goPage('pages/personalCenter/personaldata', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao56.png"></image>
						<view class="xiatitle">个人资料</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view> -->
			<view class="item" @click="goPage('/pages/jewel/addConsult?current=4', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao57.png"></image>
						<view class="xiatitle">我的咨询</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<view class="item" @click="goPage('pages/personalCenter/myActivity', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao59.png"></image>
						<view class="xiatitle">我的活动</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<view class="item" @click="goPage('/pages/personalCenter/myCollection', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao60.png"></image>
						<view class="xiatitle">我的收藏</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<!-- 	<view class="item"@click="goPage('/pages/address/address', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao61.png"></image>
						<view class="xiatitle">我的地址</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view> -->
			<view class="item" @click="goPage('/pages/coupon/user',true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao62.png"></image>
						<view class="xiatitle">我的优惠券</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<!-- //remark/comment -->
			<!-- /personalCenter/myEvaluation -->
			<view class="item" @click="goPage('pages/remark/comment', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao63.png"></image>
						<view class="xiatitle">评论消息</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<view class="item" @click="goPage('pages/personalCenter/systemMsg', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao64.png"></image>
						<view class="xiatitle">系统消息</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<!-- 	<view class="item" @click="goPage('pages/personalCenter/contactUs', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao65.png"></image>
						<view class="xiatitle">联系客服</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view> -->
			<view class="item" @click="goPage('pages/personalCenter/aboutUs', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/gywm.png"></image>
						<view class="xiatitle">关于我们</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<view class="item" @click="goPage('pages/personalCenter/joinUs', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/jrwm.png"></image>
						<view class="xiatitle">加入我们</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
				<view class="xiabr"></view>
			</view>
			<!-- 	<view class="item" @click="goPage('pages/personalCenter/systemAccount', true)">
				<view class="xiaBox">
					<view class="xiaitem">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao66.png"></image>
						<view class="xiatitle">账号设置</view>
					</view>
					<view>
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/fenxiao67.png"></image>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [avatar],
		computed: {
			wavetop() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-top.png';
			},
			wavemiddle() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-mid.png';
			},
			wavebottom() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-bot.png';
			},
			isBind() {
				return false;
			}
		},
		onShow() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				this.$u.vuex('vuex_user', {});
			}
			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
		},
		data() {
			return {
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				url: '',
				form: {
					avatar: ''
				}
			};
		},
		methods: {
			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				console.log('用户信息', res)
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					this.$u.vuex('vuex_user', res.data.userInfo || {});
					console.log(this.vuex_user.avatars);
				} else {
					this.$u.toast(res.msg);
					return;
				}
			},
			toSignin() {
				if (!this.vuex_user.is_install_signin) {
					this.$refs.uTips.show({
						title: '请先安装会员签到插件插件或启用该插件',
						type: 'error',
						duration: '3000'
					});

					return;
				}
				this.goPage('/pages/signin/signin', 1);
			},
			editAvatar: async function() {
				let res = await this.$api.goUserAvatar({
					avatar: this.form.avatar
				});
			},
			// #ifndef MP-WEIXIN
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.vuex_config.phone //仅为示例
				});
			},
			// #endif
			toDz() {
				uni.navigateTo({
					url: '/pages/personalCenter/address'
				})
			},
			toGrzl() {
				uni.navigateTo({
					url: '/pages/personalCenter/personaldata'
				})
			},
			toFxdd() {
				uni.navigateTo({
					url: '/pages/distribution/center'
				})
			},
			toHd() {
				uni.navigateTo({
					url: '/pages/personalCenter/myActivity'
				})
			},
			toSc() {
				uni.navigateTo({
					url: '/pages/personalCenter/myCollection'
				})
			},
			toPj() {
				//pages/personalCenter/myEvaluation
				//remark/comment
				uni.navigateTo({
					url: '/pages/personalCenter/remark/comment'
				})
				return
				uni.navigateTo({
					url: '/pages/personalCenter/myEvaluation'
				})
			},
			toZX() {
				uni.navigateTo({
					url: '/pages/personalCenter/consult'
				})
			},
			toOrder() {
				uni.navigateTo({
					url: '/pages/shop/goodsorder'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.container {
		overflow-y: auto;
		height: 100vh;
		background: #f5f5f5;
		padding-bottom: 30rpx;
	}

	.topBox {
		height: 540rpx;
		background: #de2415;
	}

	.top {
		display: flex;
		padding-left: 58rpx;
		padding-top: 45rpx;
		align-items: center;
	}

	.topitem1 {
		margin-left: 27rpx;
	}

	.top1 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}

	.name {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #ffffff;
	}

	.content {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		margin-top: 19rpx;
	}

	.num {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #ffffff;
	}

	.title {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		opacity: 0.64;
		margin-top: 18rpx;
	}

	.zhong {
		height: 254rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 30rpx;
		margin-top: -180rpx;
	}

	.zhongBox {
		display: flex;
		justify-content: space-evenly;
		margin-top: 35rpx;
		text-align: center;
	}

	.zhong-title {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		padding-left: 40rpx;
		padding-top: 20rpx;
	}

	.zhongname {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.zhongname2 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
	}

	.xia {
		// height: 920rpx;
		background: #ffffff;
		border-radius: 28rpx;
		margin-top: 28rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 30rpx;
	}

	.xiatitle {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 16rpx;
	}

	.xiaitem {
		display: flex;
	}

	.xiaBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.xiabr {
		border: 1px solid #f2f2f2;
		margin-top: 30rpx;
	}

	.item {
		margin-top: 26rpx;
	}
</style>
